@charset "UTF-8";
/*整站样式*/
html,body,dl,dd,img,form,div,ul,ol,li,h1,h2,h3,h4,h5,h6,p,button,input{margin:0;padding:0; border:0;}
body{font-family:'Microsoft Yahei','STXihei','Heiti SC', Helvetica, Arial, Verdana, sans-serif;background-color:#fff;}
input,textarea,button{padding: 0;font-family: Verdana, Arial;}
h1,h2,h3,h4,h5,h6{font-weight: normal;}
select,input,textarea,button{vertical-align:middle;outline:none;font-family:'Microsoft Yahei','STXihei','Heiti SC', Helvetica, Arial, Verdana, sans-serif;}
img {border:0;}
i,em {font-style:normal;}
input[type=submit]:hover,button:hover { cursor:pointer;}
a {color:#333;cursor:pointer;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;cursor:pointer;}
a:active{text-decoration:none;}
.hidden{display:none;visibility:hidden;}
.wrap{border: 0;padding:0 80px;margin:0 auto;*zoom:1;}
.wrap:after{clear: both;content:"";display: table;}
.clear{clear:both;font-size:0;line-height:0;height:0;visibility:hidden;}
.clearfix:before, .clearfix:after,.layouts:before,.layouts:after {
    content:"";
    display:table;
}
.clearfix:after,.layouts:after {
    clear:both;
}
.clearfix,.layouts {
    zoom:1;
}
.layouts {margin:0 auto;}
.fl{float: left;}
.fr{float: right;}
.pors{position: relative;}
.tl{text-align: left;}
.tc{text-align: center;}
.tr{text-align: right;}
.hide {opacity:0;}
header li,.index_banner li,.index_four li,.index_case_list li,.our_user li,.news_list li,.fix-contact li {list-style-type:none;}
@media (max-width: 1400px) {
    .layouts {width: 92%;}
}
@media (min-width: 1600px) {
    .layouts {width: 84%;}
}
.picture {display:block;overflow:hidden;}
.picture img {display:block;width:100%;transition:all .6s;-moz-transition:all .6s;-webkit-transition:all .6s;}
.picture:hover img {transform:scale(1.05);-moz-transform:scale(1.05);-webkit-transform:scale(1.05);}
.transition{transition:all .4s cubic-bezier(.215, .61, .355, 1) 0s;-moz-transition:all .4s cubic-bezier(.215, .61, .355, 1) 0s;-webkit-transition:all .4s cubic-bezier(.215, .61, .355, 1) 0s;}
/*header*/
header {
    z-index:9999;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    padding:24px 0;
    transition:all .6s cubic-bezier(.215, .61, .355, 1) 0s;
}
header.on {padding:23px 0;background:rgba(255,255,255,.5);box-shadow:0 2px 6px rgba(0,0,0,.1);}
header .logo img {
    position:absolute;
    transition:all .6s;
    opacity:0;
}
header .logo img:first-child {z-index:99991;opacity:1;}
header.on .logo img:last-child {opacity:1;}
header.on .logo img:first-child {opacity:0;}
nav {
    float:right;
}
nav li {
    float:left;
    margin-right:25px;
}
nav .per {
    display:block;
    padding-top:6px;
    font-size:16px;
    color:#fff;
}
header.on .per {padding-top:0;color:#333;}
nav .on .per,nav .per:hover {color:#f38402;}
nav .nav_icon {
    position: absolute;
    bottom: 15px;
    display: block;
    height: 2px;
    background: #f38402;
}
.index_banner {position:fixed;left:0;top:0;width:100%;overflow:hidden;}

.index_banner a > img {
    display:block;
    width:100%;
}
.index_banner article {
    z-index:99;
    position:absolute;
    top:38%;
    left:0;
    width:100%;
    height:100%;
    text-align:center;
}
.index_banner article .title {
    font-family:'Simsun';
    font-size:66px;
    color:#fff;
}
.index_banner article .title img {width:auto;margin-bottom:15px;}
.index_banner .img_show {
    z-index:99;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding-top:5%;
    text-align:center;
    box-sizing:border-box;
}
.index_banner .pc_img {
    position:absolute;
    left:50%;
    top:20%;
    margin-left:-340px;
}
.index_banner .phone_img {
    position:absolute;
    left:50%;
    top:63%;
    margin-left:-530px;
}
.index_banner .ipad_img {
    position:absolute;
    left:50%;
    top:63%;
    margin-left:-380px;
}
.index_banner .notebook_img {
    position:absolute;
    right:50%;
    top:63%;
    margin-right:-550px;
}
.orange_btn_w{
    width:375px;
    height:70px;
    margin:20px auto;
    border: 1px solid #f38402;
    color: #fff;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    transition: border 1s;
    box-sizing: border-box;
    transition: border 1s;
    display: flex;
    flex-direction: column;
    will-change: transform;
    backface-visibility: hidden;
    justify-content: flex-end;
}
.orange_btn_w .text {
    display:block;
    width:100%;
    font-size:20px;
    color:#fff;
    line-height:70px;
    transition: all .4s;
    z-index: 3;
    position: relative;
    justify-content: center
}
.orange_btn_w .text span {
    position: absolute;
    left: 0;
    top: 100%;
    transform: translateZ(0);
    display:block;
    width:100%;
    height:100%;
    justify-content: center;
}
.orange_btn_w .line {
    position: absolute;
    width: calc(100% + 60px);
    left: -30px;
    top: 50%;
    background: hsla(0,0%,100%,.6);
    height: 1px;
    z-index: 2;
}
.orange_btn_w  .line:after {
    content: "";
    background: #fff;
    left: 0;
    position: absolute;
    height: 3px;
    width: 50px;
    top: -1px;
    transition: all .9s;
}
.orange_btn_w .stripe-holder {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex: 1;
}
.orange_btn_w  .stripe {
    position: absolute;
    width: 100%;
    height: 50%;
    transition: all .6s;
    transition-delay: .3s;
    z-index: -1;
    background: #f38402;
}
.orange_btn_w  .stripe-1 {
    top: 0;
    left: 0;
    transform: translate3d(-102%,0,0);
}
.orange_btn_w .stripe-2 {
    bottom: 0;
    right: 0;
    transform: translate3d(102%,0,0);
}
.active  .orange_btn_w .stripe{
    transform: translateZ(0)
}
.active .orange_btn_w:hover  .stripe-1 {transform: translate3d(-102%,0,0);}
.active .orange_btn_w:hover  .stripe-2 {transform: translate3d(102%,0,0);}
.orange_btn_w:hover .text,.active.orange_btn_w .text   {
    transform: translate3d(0, -100%, 0)
}
.active .orange_btn_w .line:after  {
    left: calc(100% - 50px)
}
.active .orange_btn_w:hover .line:after {left:0;}
.index_banner .des {font-size:16px;color:#fff;}
.index_banner .mask {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
}
.index_banner .swiper-container-horizontal>.swiper-pagination-bullets,.index_banner  .swiper-pagination-custom, .swiper-pagination-fraction {
    z-index:1;
    bottom:5.5rem;
}
.index_banner .swiper-pagination-bullet {
    width:14px;
    height:14px;
    border:1px solid #fff;
    background:transparent;
    opacity:1;
    filter:Alpha(opacity=100);
    border-radius:7px;
}
.index_banner .swiper-pagination-bullet-active {width:60px;background:#fff;}
.nGyroParallax1 {
    z-index:100;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: .5s ease-out;
}
#chouchin-1-1 {
    margin: -26% 0 0 -40%;
}
#chouchin-1-2 {
    margin: -22% 0 0 20%;
}
#chouchin-1-1 img,
#chouchin-1-2 img {
    transform: translate3d(0,0,0);
    transition: .5s;
}
#aori {
    margin: 12% 0 0 -30%;
}
#hotaru {
    margin: 8% 0 0 15%;
}
#aori img,
#hotaru img {
    transform: translate3d(0,0,0);
    -webkit-filter: drop-shadow(4px 0 3px black);
    -ms-filter: drop-shadow(4px 0 3px black);
    filter: drop-shadow(4px 0 3px black);
    transition: .5s;
}
.single_line {
    display:block;
    width:100px;
    height:1px;
    margin:15px auto;
    background:#879399;
}
.square {
    position:absolute;
    left:50%;
    display:block;
    width:400px;
    height:257px;
    margin-top:-195px;
    margin-left:-200px;
}
.index_banner .double_line {
    position:absolute;
    left:50%;
    display:block;
    width:25%;
    height:1px;
    background:#b2bdc1;
}
.index_banner .l_line {
    top:14%;
    margin-left:-33%;
}

.index_banner .r_line {
    top:-2%;
    margin-left:8%;
}
@keyframes myfirst
{
    0% {transform:scale(1);}
    50% {transform:scale(1.05);}
    100% {transform:scale(1);}
}

@-moz-keyframes myfirst /* Firefox */
{
    0% {transform:scale(1);}
    50% {transform:scale(1.05);}
    100% {transform:scale(1);}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
    0% {transform:scale(1);}
    50% {transform:scale(1.05);}
    100% {transform:scale(1);}
}

@-o-keyframes myfirst /* Opera */
{
    0% {transform:scale(1);}
    50% {transform:scale(1.05);}
    100% {transform:scale(1);}
}
.index_banner .swiper-slide.swiper-slide-active > a > img {
    animation: myfirst 5s;
    -moz-animation: myfirst 5s;	/* Firefox */
    -webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
    -o-animation: myfirst 5s;
}

.index_total {z-index:9;position:relative;margin-top:49.5rem;}
.index_four ul {position:relative;}
.index_four li {
    position:relative;
    float:left;
    display:table;
    width:25%;
    height:18rem;
    text-align:center;
    overflow:hidden;
    background:#fff;
}
.index_four li:hover {background:#f38402;}
.index_four li a {
    z-index:2;
    position:relative;
    display:table-cell;
    vertical-align:middle;
    overflow:hidden;
}
.index_four li .picture {
    z-index:2;
    position:relative;
    width:6rem;
    height:5.6rem;
    margin:0 auto;
    overflow:hidden;
}

.index_four li:hover .icon1 {
    display:none;
}
.index_four li .title {
    z-index:2;
    position:relative;
    margin-top:25px;
    font-size:16px;
}
.index_four li:hover .title {color:#fff;}
.index_title_w {
    padding:3rem 0 2.3rem;
    font-family:'Simsun';
    color:#000;
    text-align:center;
}
.index_title1 {
    font-size:22px;
    color:#666;
   text-transform:uppercase;
}
.index_title2 {  font-size:36px;}
.index_line {
    display:block;
    width:50px;
    height:1px;
    margin:12px auto 8px;
    background:#9b9b9b;
}
.index_tips {
    max-width:80%;
    margin:4px auto 15px;font-family:'Microsoft Yahei','STXihei','Heiti SC', Helvetica, Arial, Verdana, sans-serif;
    font-size:14px;
}
.index_wrap:nth-child(2n) {background:#f2f2f2;}

.index_choice {padding-bottom:2.25rem;}
.index_choice .each_wrap {
    position:relative;
    float:left;
    width:50%;
    height:34rem;
    box-sizing:border-box;
}
.index_choice .per_one {
    position:absolute;
    bottom:0;
    width:50%;
    height:50%;
    padding:3rem 2.5rem;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.index_choice .per_one:first-child {
    top:0;
    left:0;
    width:100%;
    background-color:#f5a300;
}
.index_choice .per_one2 {
    left:-50%;
    background:rgba(221,179,30,.8);
}
.index_choice .per_one3 {
    left:0;
    background:#eec545;}
.index_choice .per_one4 {
    right:0;
    background:#f38402;
}
.index_choice .per_one .mask {
    position:absolute;
    left:0;
    bottom:100%;
    width:100%;
    height:0;
    transition:all .4s;
}
.index_choice .per_one:hover .mask {height:2rem;}
.index_choice .per_one2 .mask {background-color:rgba(221,179,30,.8);}
.index_choice .per_one3 .mask {background-color:#eec545;}
.index_choice .per_one4 .mask {background-color:#f38402;}
.index_choice .per_one .zero {
    font-family:'Simsun';
    font-size:80px;
    color:#fff;
}
.index_choice .per_one .title {
    margin:1rem 0;
    font-size:22px;
    color:#fff;
}
.index_choice .per_one .tips {
    font-size:14px;
    color:rgba(255,255,255,.6);
}
/*成功案例*/
.index_case {background:#fff;}
.index_case_list {padding-bottom:1.75rem;}
.index_case_list li {
    position:relative;
    float:left;
    width:25%;
    text-align:center;
}
.index_case_list li a {
    display:block;
    transition:all .4s;
}
.index_case_list li .title a {
    z-index:1;
    position:relative;
    font-size:16px;
    color:#2b2b2b;
    white-space:nowrap;
    overflow:hidden;
    background:#fff;
}
.index_case_list li:hover .title a {color:#fff;background:#f38402;}
.index_case_list li .gray_one,.index_case_list li .title a{
    height:2.5rem;
    line-height:2.5rem;}
.index_case_list li .gray_one {
    position:absolute;
    bottom:0;
    width:100%;
    font-size:14px;
    color:#000;
    background:rgba(255,255,255,.8);
}
.index_case_list li:hover .more {bottom:2.65rem;}
.index_case_list li:hover .read {bottom:5.25rem;}
.index_case_list li .gray_one .icon {
    display:inline-block;
    width:20px;
    height:20px;
    margin-right:12px;
    vertical-align:-5px;
}
.index_case_list li .more .icon {background:url(../images/more1.png) no-repeat center center;}
.index_case_list li .read .icon {background:url(../images/read.png) no-repeat center center;}

.index_case_list ul li:nth-child(5){
    clear:both;
}
/**/
.index_advantage {padding:3.5rem 0 3rem;}
.index_advantage .each_side {
    float:left;
    width:50%;
    min-height:40rem;
    text-align:center;
}
.our_advantage {
    background:url(../images/bg1.jpg) no-repeat center center;
    background-size:100% 100%;
}
.our_user .index_title_w {padding:3rem 0 0;}
.our_advantage .index_title_w {color:#fff;}
.advantage_list .per_one {
    margin-bottom:2rem;
    font-size:24px;
    color:#fff;
}
.advantage_list .per_one .number {font-weight:300;font-weight:lighter;font-size:5rem;vertical-align:-.75rem;color:#f38402;}
/*数字滚动插件的CSS可调整样式*/
.mt-number-animate{ font-family: '微软雅黑'; line-height:5rem; height:4.75rem;/*设置数字显示高度*/; font-size: 5rem;/*设置数字大小*/ overflow: hidden; display: inline-block; position: relative; }
.mt-number-animate .mt-number-animate-dot{ width: 3rem;/*设置分割符宽度*/ line-height: 4.75rem; float: left; text-align: center;}
.mt-number-animate .mt-number-animate-dom{ width: 3rem;/*设置单个数字宽度*/ text-align: center; float: left; position: relative; top: 0;}
.mt-number-animate .mt-number-animate-dom .mt-number-animate-span{ width: 100%; float: left;}

.advantage_list .per_one .line {
    display:inline-block;
    width:42px;
    height:54px;
    background:url(../images/line.png) no-repeat center center;
    vertical-align:-15px;
}
.our_user {background-color:#fff;}
.our_user .swiper-container {width:80%;padding-bottom:1.5rem;}
.our_user .swiper-pagination-bullet {border:1px solid #333;background:transparent;}
.our_user .swiper-pagination-bullet-active {background:#bcbcbc;border-color:#bcbcbc;}
.our_user ul {margin-left:-3%;}
.our_user li {position:relative;float:left;width:47%;margin-left:3%;margin-bottom:3%;overflow:hidden;}
.our_user .user_picture{
    height:8.5rem;
    width:100%;
    border:1px solid #ededed;
    overflow:hidden;
    box-sizing:border-box;

}
.our_user .swiper-slide .img {
    transition:all .6s;}

.our_user .swiper-slide img {
    position:absolute;
    left:50%;
    top:50%;
    display:inline-block;
    margin-top:-50px;
    margin-left:-75px;
    transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
    -webkit-transform:rotateY(0deg);
    transition:all .4s;

}
.our_user .swiper-slide img:last-child,.our_user .swiper-slide li:hover img {
    transform:rotateY(90deg);
    -moz-transform:rotateY(90deg);
    -webkit-transform:rotateY(90deg);
}
.our_user .swiper-slide li:hover img:last-child   {
    transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
    -webkit-transform:rotateY(0deg);
}
/**/
.index_news {background:#fff;}
.news_list ul {margin-left:-3%;}
.news_list li {
    position:relative;
    float:left;
    width:30%;
    padding:1rem 0 3rem;
    margin-left:3.33%;
    border-top:1px solid #e0e0e0;
    overflow:hidden;
}
.news_list li .l_line {
    position:absolute;
    left:0;
    top:0;
    display:block;
    width:0;
    height:1px;
    background:#000;
    transition:all .6s;
}
.news_list li:hover .l_line {width:100%;}
.news_list li .title a {
    display:block;
    font-size:18px;
    color:#000;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.news_list li .des {
    height:45px;
    margin:1rem 0 1.5rem;
    font-size:14px;
    color:#999;
    line-height:22px;
    overflow:hidden;
}
.news_list li .date {
    display:block;
    margin-bottom:1.75rem;
    font-size:18px;
    color:#000;
}
.news_list li .date em {
    font-size:30px;
}
.news_list li .date i {font-size:24px;}
.news_list .more {
    display:block;
    font-size:14px;
    color:#000;
    text-transform:uppercase;
}
.news_list .more span {
    float:left;
    transition:all .6s;
}
.news_list .more .word {
    margin-right:5px;
    margin-left:-60px;
}
.news_list li:hover .more .word {margin-left:0;}
.news_list .more .line {
    display:inline-block;
    width:100px;
    height:1px;
    margin-top:10px;
    background:#e0e0e0;
}
.news_list .more .str {
    display:inline-block;
    width:0;
    height:0;
    margin-top:6.5px;
    border-left:5px solid #e0e0e0;
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
}
.news_list li:hover .more .line {background:#000;}
.news_list li:hover .more .str {border-left-color:#000;}
.index_feedback_contact {overflow:hidden;}
.index_feedback_contact .each_side {
    position:relative;
    float:left;
    width:50%;
    padding-bottom:9999px;
    margin-bottom:-9999px;
    text-align:center;
}
.index_contact .bg {position:absolute;left:0;top:0;}
.index_contact .bg img {display:block;}
.index_feedback_contact .index_title_w { padding:3rem 0 .75rem;text-align:left;}
.index_feedback_contact .index_tips {margin:0 0 15px;}
.index_feedback_contact .each_box {
    position:relative;
    display:inline-block;
    width:402px;
    padding-bottom:1.5rem;
    text-align:left;
}
.index_feedback .input_w {
    margin-bottom:1rem;
}
.index_feedback_contact .index_feedback .each_box {}
.index_feedback input:hover,.index_feedback input:active {border:1px solid #f38402;}
.index_feedback input {
    width:400px;
    height:55px;
    padding:0 1rem;
    font-family:'Simsun';
    font-size:16px;
    color:#999;
    box-sizing:border-box;
    background:#fff;
}
.index_feedback input[type=submit] {
    font-size:18px;
    color:#fff;
    background:#f38402;
}

.index_contact .index_title_w {color:#fff;}
.index_contact .index_tips {color:#999;}
.index_contact .per_one {
    height:40px;
    margin-bottom:20px;
    font-size:18px;
    color:#fff;
    line-height:36px;
}
.index_contact .per_one .icon {
    display:inline-block;
    width:38px;
    height:38px;
    margin-right:3px;
    border:1px solid #9e9e9e;
    border-radius:20px;
    text-align:center;
}
.index_contact .per_one .icon img {
   vertical-align:-4px;
}
.index_contact .per_one strong {
    font-weight:normal;
}
footer {position:relative;margin-top:-1px;padding:25px 0;font-size:14px;color:#3b3b3b;line-height:1.8;background:#1e1e1f;}
footer a {color:#3b3b3b;}
footer label {float:left;}
footer .links {margin-left:75px;}
/*悬浮窗*/
.fix-contact {
    z-index:999;
    position:fixed;
    bottom:10%;
    right: 0;
}
.fix-contact li {
    margin-bottom:10px;
}
.fix-contact .icon {
    position: relative;
    display: block;
    width:50px;
    height:50px;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    background:#5b5b5b url(../images/fixed.png) no-repeat;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.fix-contact .icon:hover {background-color:#f38402;}
.fix-contact .icon1 {
    background-position:center 4px;
}
.fix-contact .icon2 {
    background-position:center -34px;}
.fix-contact .icon3 {
    background-position:center -34px;}
.fix-contact .icon4 {
    background-position:center  -72px;}
.fix-contact .icon5 {
    background-position:center  bottom;}
.fix-contact .left {
    position:absolute;
    top: 0;
    right: 55px;
    display:none;
    width:130px;
    height:50px;
    line-height:50px;
    text-align: center;
    background-color:#f38402;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.fix-contact .icon:hover .left {
    display: block;
}
.fix-contact .code {
    position:absolute;
    top:-80px;
    right: 55px;
    display: none;
    padding:20px 25px;
    background-color:#f38402;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.fix-contact .icon:hover .code {
    display: block;
}
@media (max-width:1500px){
    .index_banner article .title {font-size:54px;}
    .index_choice .per_one {padding:2rem 2.5rem;}
    .index_choice .per_one .title {margin:.5rem 0;}
}
@media (max-width:1650px){
    .nGyroParallax1 img {width:80%;}
}
@media (max-width:1450px){
    .index_banner article {top:35%;}
    .nGyroParallax1 img {width:70%;}
    .our_user .user_picture {height:7.75rem;}
    .our_user .user_picture img {height:98%;margin-top:-22.25%;}

}
@media (max-width:1680px){
    .index_banner .l_line {top:16%;}
    .index_banner .word2 img {width:440px;}
    .index_banner .word3 img {width:545px;}
    .index_banner .pc_img {
        top:24%;
        margin-left:-275px;
    }
    .index_banner .pc_img img {width:550px;}
    .index_banner .phone_img {
        top:61%;
        margin-left:-420px;
    }
    .index_banner .phone_img img {width:110px;}
    .index_banner .ipad_img {
        top:63%;
        margin-left:-300px;
    }
    .index_banner .ipad_img img {width:305px;}
    .index_banner .notebook_img {
        top:61%;
        margin-right:-450px;
    }
    .index_banner .notebook_img img {width:355px;}
    .index_banner .pic1 img {width:868px;}
    .index_banner .pic2 img {width:876px;}
    .index_banner .pic3 img {width:872px;}
    .index_banner .pic4 img {width:870px;}
    .index_banner .pic5 img {width:880px;}
}

@media (max-width:1366px){
    .square {margin-top:-185px;}
    .index_banner .l_line {top:18%;}
}